<template>
  <div class="new-step">

    <div class="step-list-box">

      <div class="list clearfix" v-on:click="selectFn(1,'全新')">
        <div class="fl">
          <div class="img">
            <img src="../../assets/sale/100.png" alt="" />
          </div>
          <div class="ms">全新</div>
        </div>
        <div class="fr">
          <div class="font">未曾使用，包装配件齐全</div>
          <span :class="[activeId=='1'?'raido-active':'raido']"></span>
        </div>
      </div>

      <div class="list clearfix" v-on:click="selectFn(2,'99新')">
        <div class="fl">
          <div class="img">
            <img src="../../assets/sale/99.png" alt="" />
          </div>
          <div class="ms">99新</div>
        </div>
        <div class="fr">
          <div class="font">包装配件不齐全，或因存放产生微小痕迹或轻微变色，但无任何使用痕迹</div>
          <span :class="[activeId=='2'?'raido-active':'raido']"></span>
          <!--<span class="raido-active"></span>-->
        </div>
      </div>

      <div class="list clearfix" v-on:click="selectFn(3,'95新')">
        <div class="fl">
          <div class="img">
            <img src="../../assets/sale/95.png" alt="" />
          </div>
          <div class="ms">95新</div>
        </div>
        <div class="fr">
          <div class="font">未曾使用，因存放产生微小痕迹。此级别物品可能会有因放置产生的折痕、或轻微变色</div>
          <span :class="[activeId=='3'?'raido-active':'raido']"></span>
        </div>
      </div>

      <div class="list clearfix" v-on:click="selectFn(4,'9成新')">
        <div class="fl">
          <div class="img">
            <img src="../../assets/sale/90.png" alt="" />
          </div>
          <div class="ms">9成新</div>
        </div>
        <div class="fr">
          <div class="font">轻微使用，痕迹不明显，看图不容易分辨。可能有染色变化，状态可能有轻微改变</div>
          <span :class="[activeId=='4'?'raido-active':'raido']"></span>
        </div>
      </div>

      <div class="list clearfix" v-on:click="selectFn(5,'8成新')">
        <div class="fl">
          <div class="img">
            <img src="../../assets/sale/80.png" alt="" />
          </div>
          <div class="ms">8成新</div>
        </div>
        <div class="fr">
          <div class="font">明显使用痕迹，图片清晰描述，状态改变可能做过处理（交易时不做护理方面检查）</div>
          <span :class="[activeId=='5'?'raido-active':'raido']"></span>
        </div>
      </div>

      <div class="list clearfix" v-on:click="selectFn(6,'7成新')">
        <div class="fl">
          <div class="img">
            <img src="../../assets/sale/70.png" alt="" />
          </div>
          <div class="ms">7成新</div>
        </div>
        <div class="fr">
          <div class="font">使用痕迹严重，有部位损坏严重</div>
          <span :class="[activeId=='6'?'raido-active':'raido']"></span>
        </div>
      </div>


    </div>

  </div>
</template>


<script>
  import { Toast } from 'mint-ui';
  export default {
    name: 'Type',
    data () {
      return {
        attrData:[],
        activeId:''
      }
    },
    components: {

    },
    methods: {
      selectFn:function(id,name){

        var saleData = {};
        var tempData = {};
//        this.activeId= id;
 sessionStorage.setItem('activeId',id);
//        console.log(id);

        tempData.attribute_id = id;
        tempData.attribute_name = name;
        if(sessionStorage.getItem('saleData')){
          saleData = JSON.parse(sessionStorage.getItem('saleData'));
//          this.activeId= saleData.attribute_id;

        }
        $.extend(saleData,tempData)

        sessionStorage.setItem('saleData',JSON.stringify(saleData));
        this.$router.push('/sale')
      }
    },
    mounted:function(){
        this.activeId = sessionStorage.getItem('activeId');

//      var _this = this;
//      $.ajax({
//        type:'post',
//        url: RouteMap.attrList,
//        success:function(res){
//          if(res.code == 200){
//
//            _this.attrData = res.data;
//
//          }
//          else{
//            //Toast(res.msg)
//          }
//        }
//      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .new-step{

  }
  .step-list-box{
    padding: 0.8rem;
  }
  .list{
    color:#707070;
    margin-top: 0.3rem;
  }
  .list .fl{
    width: 2rem;
    text-align: center;
    font-size: 0.65rem;
  }
  .list .fl img{ width: 1.8rem;}
  .list .fr{
    width: 12rem;
    text-align: left;
    display:flex;
    align-items: center;
    height: 3rem;
    position: relative;
    border-bottom: 1px solid #e6e6e6;
    font-size: 0.6rem;
  }
  .list .fr .font{
    width: 10rem;
  }

  .raido{

    position: absolute;
    right: 0rem;
    display: inline-block;
    width: .6rem;
    height: .6rem;
    background: url("../../assets/sale/radio.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }
  .raido-active{
    position: absolute;
    right: 0rem;
    display: inline-block;
    width: .6rem;
    height: .6rem;
    background: url("../../assets/sale/radio-active.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }
</style>
